<template>
  <GenericCrud :config="crudConfig">
    <!-- 自定义列表项样式 -->
    <template #record-item="{ records, actions }">
      <view v-for="record in records" :key="record.id" class="custom-record-card bg-white m-[24rpx] rounded-[20rpx] shadow-md overflow-hidden">
        <!-- 自定义头部样式 -->
        <view class="custom-header p-[24rpx] bg-gradient-to-r from-blue-500 to-purple-600 text-white">
          <view class="flex justify-between items-center">
            <view class="flex items-center">
              <view class="w-[60rpx] h-[60rpx] rounded-full bg-white/20 flex items-center justify-center mr-[16rpx]">
                <IconFont name="icon-user" class="text-[32rpx] text-white" />
              </view>
              <view>
                <text class="text-[28rpx] font-bold">{{ record.name }}</text>
                <text class="text-[22rpx] opacity-80 block mt-[4rpx]">ID: {{ record.recordid }}</text>
              </view>
            </view>
            <view class="text-right">
              <text class="text-[20rpx] opacity-80">{{ actions.formatDate(record.createTime) }}</text>
            </view>
          </view>
        </view>

        <!-- 自定义内容样式 -->
        <view class="custom-content p-[24rpx]">
          <!-- 主要信息卡片 -->
          <view class="info-grid grid grid-cols-2 gap-[16rpx] mb-[20rpx]">
            <view v-if="record.liveAddr" class="info-item bg-gray-50 p-[16rpx] rounded-[12rpx]">
              <text class="text-[20rpx] text-gray-600 block mb-[4rpx]">常住地址</text>
              <text class="text-[24rpx] font-medium text-gray-800">{{ record.liveAddr }}</text>
            </view>
            <view v-if="record.workType" class="info-item bg-gray-50 p-[16rpx] rounded-[12rpx]">
              <text class="text-[20rpx] text-gray-600 block mb-[4rpx]">职业类型</text>
              <text class="text-[24rpx] font-medium text-gray-800">{{ record.workType }}</text>
            </view>
            <view v-if="record.incomeLevel" class="info-item bg-gray-50 p-[16rpx] rounded-[12rpx]">
              <text class="text-[20rpx] text-gray-600 block mb-[4rpx]">收入水平</text>
              <text class="text-[24rpx] font-medium text-gray-800">{{ record.incomeLevel }}</text>
            </view>
            <view v-if="record.mediType" class="info-item bg-gray-50 p-[16rpx] rounded-[12rpx]">
              <text class="text-[20rpx] text-gray-600 block mb-[4rpx]">医保类型</text>
              <text class="text-[24rpx] font-medium text-gray-800">{{ record.mediType }}</text>
            </view>
          </view>

          <!-- 标签展示 -->
          <view class="tags-container mb-[16rpx]">
            <view class="flex flex-wrap gap-[8rpx]">
              <view v-for="(value, key) in actions.getDisplayFields(record)" :key="key" 
                    class="tag-item px-[12rpx] py-[6rpx] bg-blue-100 text-blue-700 rounded-[16rpx] text-[20rpx]">
                {{ actions.getFieldLabel(key) }}: {{ value }}
              </view>
            </view>
          </view>

          <!-- 备注信息 -->
          <view v-if="record.note" class="note-section bg-yellow-50 p-[16rpx] rounded-[12rpx] border-l-4 border-yellow-400">
            <text class="text-[22rpx] text-yellow-800">📝 {{ record.note }}</text>
          </view>
        </view>

        <!-- 自定义操作按钮 -->
        <view class="custom-actions p-[24rpx] border-t border-gray-100">
          <view class="flex gap-[12rpx]">
            <nut-button size="small" type="primary" 
                       class="flex-1 bg-gradient-to-r from-blue-500 to-blue-600" 
                       @click.stop="actions.goEdit(record.id)">
              <template #icon>
                <IconFont name="edit" size="16" class="mr-[4rpx]" />
              </template>
              编辑
            </nut-button>
            <nut-button size="small" type="danger" 
                       class="flex-1 bg-gradient-to-r from-red-500 to-red-600" 
                       @click.stop="actions.deleteRecord(record.id)">
              <template #icon>
                <IconFont name="delete" size="16" class="mr-[4rpx]" />
              </template>
              删除
            </nut-button>
            <nut-button size="small" type="info" 
                       class="flex-1 bg-gradient-to-r from-green-500 to-green-600" 
                       @click.stop="goView(record.id)">
              <template #icon>
                <IconFont name="eye" size="16" class="mr-[4rpx]" />
              </template>
              查看
            </nut-button>
          </view>
        </view>
      </view>
    </template>
  </GenericCrud>
</template>

<script setup lang="ts">
import GenericCrud from '@/components/GenericCrud.vue'
import { IconFont } from '@nutui/icons-vue-taro'
import { socioeconomicFields } from './fields'
import Taro from '@tarojs/taro'

const crudConfig = {
  // 页面配置
  pageTitle: '社会经济学信息',
  searchPlaceholder: '患者姓名',
  emptyIcon: '📊',
  emptyText: '暂无社会经济学信息记录',
  addButtonText: '添加第一条',
  recordIcon: 'icon-user',
  
  // API配置
  listApi: '/health_records/socioeconomic/socioeconomicInfo/list',
  addApi: '/health_records/socioeconomic/socioeconomicInfo/add',
  editApi: '/health_records/socioeconomic/socioeconomicInfo/update',
  deleteApi: '/health_records/socioeconomic/socioeconomicInfo/delete',
  queryByIdApi: '/health_records/socioeconomic/socioeconomicInfo/queryById',
  
  // 字段配置
  fieldConfig: socioeconomicFields,
  
  // 路由配置
  addRoute: './add',
  editRoute: './edit',
  
  // 显示字段配置
  displayFields: ['liveAddr', 'workType', 'incomeLevel', 'mediType', 'houseArea', 'liveAlone']
}

function goView(id: string) {
  Taro.navigateTo({
    url: `./view?id=${id}`
  })
}
</script>

<style scoped>
.custom-record-card {
  transition: all 0.3s ease;
}

.custom-record-card:active {
  transform: scale(0.98);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
}

.info-item {
  background-color: #f9fafb;
  padding: 16rpx;
  border-radius: 12rpx;
}

.tags-container {
  margin-bottom: 16rpx;
}

.tag-item {
  padding: 6rpx 12rpx;
  background-color: #dbeafe;
  color: #1d4ed8;
  border-radius: 16rpx;
  font-size: 20rpx;
}

.note-section {
  background-color: #fef3c7;
  padding: 16rpx;
  border-radius: 12rpx;
  border-left: 4rpx solid #f59e0b;
}
</style>
